<template>
  <div v-if="data.article.content !== ''" class="view-article">
    <div class="view-header">
      <div class="tag">
        <b>{{ data.article.tagNames[0] }}</b>
        <ul>
          <li v-for="(item, index) in data.article.tagNames" :key="index">
            <em>#</em>
            {{ item }}
          </li>
        </ul>
      </div>
      <h1>{{ data.article.title }}</h1>
      <div class="article-footer">
        <img :src="data.article.creatorAvatar" alt="" />
        <span class="creator-name">{{ data.article.creatorName }}</span>
        <span class="time">发布于 {{ data.article.gmtCreate }}</span>
      </div>
    </div>
    <div class="main-article">
      <Markdown
        :text="data.article.content"
        :article-id="data.articleId"
      ></Markdown>
    </div>
  </div>
  <el-skeleton v-else :rows="15" animated />
</template>

<script setup lang="ts">
import { onMounted, reactive } from 'vue';
import { useRoute } from 'vue-router';
import { _getArticleDetail } from './view-article.service.ts';
import { ElNotification } from 'element-plus';
import Markdown from '../../../components/Markdown.vue';
// @ts-ignore
import { ArticleDetail } from '@/pages/index/index.ts';
import Crypoto from '@/utils/encrypted.ts';
import router from '@/router';

const cry: any = new Crypoto();

const route = useRoute();

const data = reactive({
  article: {
    id: '',
    viewCount: 0,
    coverPathDesc: '',
    tagNames: [],
    title: '',
    content: '',
    creatorAvatar: '',
    creatorName: '',
    gmtCreate: ''
  } as ArticleDetail,
  articleId: ''
});

onMounted(() => {
  const param = route.params.id as string;
  const id = param.split('+')[0];
  let password = '';
  if (param.split('+').length > 1) {
    password = param.split('+')[1];
    password = cry.decrypt(password);
  }
  data.articleId = id as string;
  getDetail(id as string, password as string);
});

function getDetail(id: string, password?: string) {
  _getArticleDetail(id, password).then((res) => {
    if (res.code === 200) {
      data.article = res.data;
    } else {
      ElNotification.error(res.msg);
      router.push('/');
    }
  });
}
</script>

<style scoped lang="less">
@media (max-width: 1161px) {
  /* 在宽度小于或等于 1035px 的屏幕上应用以下样式 */
  /* 在这里添加你的样式规则 */
  h1 {
    margin-top: 15px;
    margin-bottom: 12px;
    font-weight: 800;
    z-index: 100;
    position: relative;
    font-size: 35px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);

    --crane-text-opacity: 1;
    color: rgba(255, 255, 255, var(--crane-text-opacity));
  }

  .tag {
    width: 100%;
    position: relative;
    z-index: 1000;
    font-size: 14px;
    display: flex;
    flex-direction: column;

    b {
      display: inline-flex;
      font-size: 14px;
      opacity: 0.9;
      padding: 0.125rem;
      --crane-text-opacity: 1;
      color: rgba(255, 255, 255, var(--crane-text-opacity));
      text-transform: uppercase;
      text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
    }

    ul {
      padding: 0;
      display: flex;
      flex-direction: column;
      margin-top: 10px;
      margin-bottom: 0;
      justify-content: flex-start;
      align-items: flex-start;

      li {
        font-size: 14px;
        margin-right: 14px;
        opacity: 0.7;
        --crane-text-opacity: 1;
        color: rgba(255, 255, 255, var(--crane-text-opacity));
        text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
      }

      em {
        opacity: 0.5;
      }
    }
  }
}

@media (min-width: 1160px) {
  /* 在宽度大于 1035px 的屏幕上应用以下样式 */
  /* 在这里添加你的样式规则 */
  h1 {
    margin-top: 15px;
    margin-bottom: 12px;
    font-weight: 800;
    z-index: 100;
    position: relative;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 45px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);

    --crane-text-opacity: 1;
    color: rgba(255, 255, 255, var(--crane-text-opacity));

    .tag {
      width: 100%;
      position: relative;
      z-index: 1000;
      font-size: 14px;
      display: flex;

      b {
        display: inline-flex;
        font-size: 14px;
        opacity: 0.9;
        padding: 0.125rem;
        --crane-text-opacity: 1;
        color: rgba(255, 255, 255, var(--crane-text-opacity));
        text-transform: uppercase;
        text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
      }

      ul {
        padding: 0;
        display: flex;
        margin-top: 0;
        margin-bottom: 0;
        margin-left: 10px;
        justify-content: center;
        align-items: center;

        li {
          font-size: 14px;
          margin-right: 14px;
          opacity: 0.7;
          --crane-text-opacity: 1;
          color: rgba(255, 255, 255, var(--crane-text-opacity));
          text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
        }

        em {
          opacity: 0.5;
        }
      }
    }
  }

  .tag {
    width: 100%;
    position: relative;
    z-index: 1000;
    font-size: 14px;
    display: flex;

    b {
      display: inline-flex;
      font-size: 14px;
      opacity: 0.9;
      padding: 0.125rem;
      --crane-text-opacity: 1;
      color: rgba(255, 255, 255, var(--crane-text-opacity));
      text-transform: uppercase;
      text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
    }

    ul {
      padding: 0;
      display: flex;
      margin-top: 0;
      margin-bottom: 0;
      margin-left: 10px;
      justify-content: center;
      align-items: center;

      li {
        font-size: 14px;
        margin-right: 14px;
        opacity: 0.7;
        --crane-text-opacity: 1;
        color: rgba(255, 255, 255, var(--crane-text-opacity));
        text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
      }

      em {
        opacity: 0.5;
      }
    }
  }
}

.view-article {
  width: 78vw;
  z-index: 50;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;

  .article-footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 14px;
    width: 100%;
    margin: 50px 0;

    img {
      width: 40px;
      height: 40px;
      border-radius: 40px;
      box-shadow: var(--crane-ring-offset-shadow, 0 0 #0000),
        var(--crane-ring-shadow, 0 0 #0000), var(--crane-shadow);
      border-style: solid;
      border-color: var(--background-primary);
    }

    span {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .creator-name {
      margin-left: 10px;
      font-weight: 600;
    }

    .time {
      margin-left: 10px;
      color: var(--font-color-sign);
    }
  }

  .main-article {
    width: 100%;
  }

  .view-header {
    width: 100%;

    .writer-info {
      width: 100%;
      display: flex;
    }

    p {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      word-wrap: break-word;
      word-break: break-all;
      font-size: 16px;
    }
  }
}
</style>
